<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>currentTarget和target的区别</title>
</head>
<body>

    <ul id="box" style="background-color: #bfa;">
        <Li id="apple" style="background-color:red;">苹果</Li>
        <li>香蕉</li>
        <li>桃子</li>
    </ul>
<script>
    var box = document.getElementById('box')
    var apple = document.getElementById('apple')

    // 直接绑定事件到目标元素apple上
    apple.onclick = function (e){
        console.log(e.target) // <Li id="apple" style="background-color:red;">苹果</Li>
        console.log(e.currentTarget) // <Li id="apple" style="background-color:red;">苹果</Li>
        console.log(this) // <Li id="apple" style="background-color:red;">苹果</Li>
        console.log(e.target === e.currentTarget) // true
    }

    console.log("===========");

    // 绑定事件到父元素中()
    box.onclick = function(e){
        console.log(e.target) //  <Li id="apple" style="background-color:red;">苹果</Li>
        console.log(e.currentTarget) // <ul id="box" style="background-color: #bfa;"></ul>
        console.log(this)// <ul id="box" style="background-color: #bfa;"></ul>
        console.log(e.target === e.currentTarget) // false
    }
</script>
</body>
</html>
